<template>
    <div id="index">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">

            <!--                头部的导航栏-->
            <headenav></headenav>
            <div class="body-box">
                <!-- 第三行数据 -->
                <div class="content-box">
                    <div>
                        <dv-border-box-12>
                            <centerLeft1/>
                            <!--                                <div class="continer"></div>-->
                        </dv-border-box-12>
                    </div>
                    <div>
                        <dv-border-box-12>
                            <centerLeft2/>
                        </dv-border-box-12>
                    </div>
                    <!-- 中间 -->
                    <div>
                        <center/>
                    </div>
                    <!-- 中间 -->
                    <div>
                        <centerRight2/>
                    </div>
                    <div>
                        <dv-border-box-13>
                            <centerRight1/>
                        </dv-border-box-13>
                    </div>
                </div>

                <!-- 第四行数据 -->
                <div class="bototm-box">
                    <dv-border-box-13>
                        <bottomLeft/>
                    </dv-border-box-13>
                    <dv-border-box-12>
                        <bottomRight/>
                    </dv-border-box-12>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import centerLeft1 from "./centerLeft1";
    import centerLeft2 from "./centerLeft2";
    import centerRight1 from "./centerRight1";
    import centerRight2 from "./centerRight2";
    import center from "./center";
    import bottomLeft from "./bottomLeft";
    import bottomRight from "./bottomRight";
    import headenav from "../../components/headenav/index"

    export default {
        data() {
            return {
                loading: false,

            };
        },
        components: {
            centerLeft1,
            centerLeft2,
            centerRight1,
            centerRight2,
            center,
            bottomLeft,
            bottomRight,
            headenav
        },
        mounted() {

            this.cancelLoading();
        },
        methods: {

            cancelLoading() {
                setTimeout(() => {
                    this.loading = false;
                }, 500);
            },

        }
    };
</script>

<style lang="scss">
    @import '../../assets/scss/index';

    .continer {
        border: solid red 1px;
    }
</style>